//主要样式
:root {
	--dx-main-bg-color: #f1f4f6;
	--dx-menu-bg-color: #2f4256;
	--dx-menu-active-color: #ffffff;
	--dx-menu-sub-color: #c0ced5;
	--dx-menu-inline-bg-color: #1f2d3d;
	--dx-menu-highlight-bg-color: #409eff;
	--dx-tips-color: #909399;
	--dx-layer-footer-bg-color: #f6f6f6;
	--dx-layer-header-bg-color: #2f4256;
	--dx-layer-header-color: #ededed;
	--dx-layer-header-hover-color: #409eff;
}

uni-left-window {
	width: auto;
}
uni-main {
	overflow-y: auto;
	background-color: var(--dx-main-bg-color);
}
uni-page-body {
	padding: 15px;
	height: 100%;
	overflow-x: auto;
}
.dx-left-window {
	transition: all 0.3s ease-in-out;
}
.left-window-drawer {
	background-color: var(--dx-menu-bg-color);
	.el-drawer__body {
		padding: 0;
	}
}
/* NavMenu 导航菜单
------------------------------- */
body:has(.dx-menu-select-bg-color) {
	// 鼠标 hover 时颜色
	.el-menu-hover-bg-color,
	.el-menu-item:hover {
		background-color: var(--dx-menu-highlight-bg-color) !important;
	}
	.el-menu-item.is-active,
	.el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title {
		color: var(--dx-menu-active-color);
	}
	// 水平菜单、横向菜单高亮 背景色，鼠标 hover 时，有子级菜单的背景色
	.el-menu-item.is-active,
	.el-sub-menu.is-active .el-sub-menu__title,
	.el-sub-menu:not(.is-opened):hover .el-sub-menu__title {
		@extend .el-menu-hover-bg-color;
	}
	.el-sub-menu.is-active.is-opened .el-sub-menu__title {
		background-color: unset !important;
	}
}
.dx-menu:not(.el-menu--collapse) {
	width: 240px;
	height: 100%;
}
.el-menu--collapse > .el-sub-menu > .el-sub-menu__title > .i-icon {
	overflow: visible;
	visibility: visible;
}
// 默认样式修改
.el-menu {
	border-right: none !important;
}
.el-menu-item,
.el-sub-menu__title {
	color: var(--dx-menu-sub-color);
}
.el-menu.el-menu--inline {
	background-color: var(--dx-menu-inline-bg-color);
}
// 修复点击左侧菜单折叠再展开时，宽度不跟随问题
.el-menu--collapse {
	width: 64px !important;
}
// 外部链接时
.el-menu-item a,
.el-menu-item a:hover,
.el-menu-item i,
.el-sub-menu__title i {
	color: inherit;
	text-decoration: none;
}

// 水平菜单、横向菜单折叠背景色
.el-popper.is-pure.is-light {
	// 水平菜单
	.el-menu--vertical {
		background: var(--dx-menu-bg-color);
		.el-sub-menu.is-active .el-sub-menu__title {
			color: var(--dx-menu-sub-color);
		}
		.el-popper.is-pure.is-light {
			.el-menu--vertical {
				.el-sub-menu .el-sub-menu__title {
					background-color: unset !important;
					color: var(--dx-menu-sub-color);
				}
				.el-sub-menu.is-active .el-sub-menu__title {
					color: var(--dx-menu-active-color);
				}
			}
		}
	}
}

.el-dropdown-menu {
	list-style: none !important;
}
.el-dropdown-menu .el-dropdown-menu__item {
	white-space: nowrap;
	&:not(.is-disabled):hover {
		background-color: var(--el-dropdown-menuItem-hover-fill);
		color: var(--el-dropdown-menuItem-hover-color);
	}
}
.el-menu.el-menu--collapse > .el-sub-menu > .el-sub-menu__title > span {
	height: auto;
}

.dx-body {
	background: #ffffff;
	border-radius: 5px;
	overflow: hidden;
}
//
.dx-bg-white {
	background: #ffffff;
}

// 弹窗
.dx-layer {
	.vxe-modal--footer {
		background-color: var(--dx-layer-footer-bg-color);
	}
	.vxe-modal--box {
		border: none !important;
		.vxe-modal--header {
			height: 55px;
			line-height: 33px;
			background-color: var(--dx-layer-header-bg-color);
			color: var(--dx-layer-header-color);
			.vxe-modal--header-title {
				padding: 0.6em 0 0.6em 1.5em;
			}
			.vxe-modal--header-right {
				padding: 0.6em 1.5em 0.6em 0;
			}
			.vxe-modal--close-btn:hover {
				color: var(--dx-layer-header-hover-color);
			}
			.vxe-modal--zoom-btn:hover {
				color: var(--dx-layer-header-hover-color);
			}
		}
	}
}
.dx-layer-form {
	.el-date-editor.el-input {
		width: 100%;
		.el-input__wrapper {
			width: 100%;
		}
	}
}
.dx-image-space {
	.vxe-modal--content {
		padding: 0 !important;
	}
}
.dx-tips {
	color: var(--dx-tips-color);
}
.dx-tools-popper {
	min-width: 80px !important;
}
.dx-right-menu {
	.item {
		cursor: pointer;
		border-radius: 3px;
		&:hover {
			background-color: #f4f6f8;
		}
	}
}
